<style scoped lang="scss">
/* 样式完全复用，无需修改 */
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.follows-list {
  width: 10rem;
  height: 93vh;
  display: flex;
  flex-direction: column;

  .follows-list-wrap {
    width: 10rem;
    height: 1.7333rem;
    @include flex-center;

    .follows-item {
      width: 9.4667rem;
      height: 1.6rem;
      @include flex-align-center;

      .follows-img {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        margin-right: .2667rem;

        img {
          width: 1.2rem;
          height: 1.2rem;
          border-radius: 50%;
        }
      }

      .follows-info {
        width: 6.0267rem;
        height: 1.2rem;

        p {
          color: #e8e8e9;
          margin-top: .0533rem;
          font-size: .3733rem;
        }

        span {
          margin-top: .2667rem;
          font-size: .32rem;
          color: #8b8c96;
          line-height: 0;
          display: block;
        }
      }

      .follows-btn {
        width: 1.8667rem;
        height: .6667rem;
        @include flex-center;
        border-radius: .1333rem;

        button {
          width: 1.8667rem;
          height: .6667rem;
          border-radius: .1333rem;
          font-size: .32rem;
          color: #e8e8e9;
          border: 0;
        }
      }
    }
  }
}

.btn {
  background-color: #383b44;
}

.btnActive {
  background-color: #f8355f;
}
</style>
<template>
  <div>
    <!-- 标题栏（动态传入标题和返回路径） -->
    <PageTitleBar :title="title" :path="backPath" />
  </div>
  <div class="follows-list">
    <!-- 列表循环（使用传入的通用数据） -->
    <div class="follows-list-wrap" v-for="item in userList" :key="item.userId">
      <div class="follows-item">
        <div class="follows-img">
          <img :src="`http://43.138.15.137:3000${item.userAvatar}`" alt="">
        </div>
        <div class="follows-info">
          <p>@{{ item.userNickname }}</p>
          <span>{{ item.userDesc }}</span>
        </div>
        <div class="follows-btn">
          <!-- 按钮状态和文本（复用逻辑） -->
          <button class="btn" :class="{ 'btnActive': item.bothStatus === 3 || item.bothStatus === 2 }"
            @click="handleItemClick(item)">
            {{ item.bothStatus === 0 ? '已关注' : item.bothStatus === 1 ? '互相关注' : '关注' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import PageTitleBar from '@/components/common/PageTitleBar.vue'
import { ref } from 'vue'

// 接收父组件传入的参数（差异点）
const props = defineProps({
  title: { type: String, required: true }, // 页面标题："我的关注"或"我的粉丝"
  backPath: { type: String, required: true }, // 返回路径：关注列表→"/user"，粉丝列表→"/xxx"
  userList: { type: Array, default: () => [] }, // 列表数据：关注列表或粉丝列表
  pageNum: { type: Number, default: 1 } // 分页参数（可选）
})

// 向父组件传递点击事件（让父组件处理API调用，保持组件通用性）
const emit = defineEmits(['handleItem'])

// 点击按钮时，计算新状态并通知父组件
function handleItemClick(item) {
  // 计算新状态（复用你的切换逻辑）
  const currentStatus = item.bothStatus
  let newStatus
  if (currentStatus === 0) {
    newStatus = 2 // 已关注 → 关注
  } else if (currentStatus === 1) {
    newStatus = 3 // 互相关注 → 关注
  } else if (currentStatus === 2) {
    newStatus = 0 // 关注 → 已关注
  } else if (currentStatus === 3) {
    newStatus = 1 // 关注 → 互相关注
  }
  // 向父组件传递：当前项 + 新状态
  emit('handleItem', { item, newStatus })
}
</script>